<template>
	<view class="area-card">
		<view class="u-flex u-flex-between u-flex-items-center">
			<view class="top-left u-flex u-flex-items-center">
				<view v-if="icon" class="iconfont" v-html="icon"></view>
				<view class="title">{{ title }}</view>
			</view>
			<view v-if="rightText" class="right-text" @click="rightClick">
				{{ rightText }}
			</view>
		</view>
		<view class="bottom-area">
			<slot name="area"></slot>
		</view>
	</view>
</template>

<script setup>
	const emits = defineEmits([
		'rightClick'
	])

	const props = defineProps({
		title: {
			type: String,
			default: 'TITLE'
		},
		icon: {
			type: String,
			default: ''
		},
		rightText: {
			type: String,
			default: ''
		}
	})

	const rightClick = () => {
		emits('rightClick')
	}
</script>

<style lang="scss" scoped>
	.area-card {
		padding: 18px;
		background: #fff;
		margin-bottom: 10px;

		.top-left {
			.iconfont {
				color: #000 !important;
				font-size: 18px !important;
			}

			.title {
				font-size: 16px;
				font-weight: 600;
				margin-left: 10px;
				letter-spacing: 1px;
			}
		}

		.right-text {
			font-size: 26rpx;
			font-weight: bolder;
			position: relative;

			&::after {
				content: '';
				display: inline-block;
				width: 26px;
				height: 1px;
				background-color: #000;
				position: absolute;
				bottom: -4px;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.bottom-area {
			margin-top: 18px;
		}

	}
</style>